﻿<!DOCTYPE html>
<html lang="en">
 <head> 
  <!-- meta --> 
  <meta charset="utf-8" /> 
  <meta content="width=device-width, initial-scale=1.0" name="viewport" /> 
  <title>炽热教育</title> 
  <meta content="" name="keywords" /> 
  <meta content="" name="description" /> 
  <link href="css/bootstrap.min.css" rel="stylesheet" /> 
  <link href="css/hover.min.css" rel="stylesheet" /> 
  <link href="css/ionicons.min.css" rel="stylesheet" /> 
  <link href="css/owl.carousel.min.css" rel="stylesheet" /> 
  <link href="css/magnific-popup.css" rel="stylesheet" /> 
  <link href="css/responsive.css" rel="stylesheet" /> 
  <link href="css/style.css" rel="stylesheet" /> 
  <link href="css/teacherinfo_css1.css" rel="stylesheet" /> 
  <!-- Favicon --> 
  <link rel="shortcut icon" href="images/favicon.png" /> 
     <style type="text/css">
   #header {
	background: url("") repeat scroll center center / cover;
	height: 100vh;
	width: 100%;
}

#header .header-content {
	height: 100vh;
	text-align: left;
	width: 100%;
	display: flex;
	justify-content: center;
	flex-direction: column;
}

.header-content h1 {
	font-size: 40px;
	font-weight: 700;
	margin-bottom: 10px;
	text-transform: uppercase;
	color: #fff;
}

.header-content p {
	font-size: 13px;
	letter-spacing: 5px;
	margin-top: 0;
	margin-bottom: 30px;
	text-transform: capitalize;
	color: #fff;
	font-weight: 500;
}

.header-content .list-social li {
	float: left;
	margin-right: 20px;
}

.header-content .list-social li i {
	color: #fff;
	font-size: 15px;
}
</style>
 </head> 
 <body onload ="getTeacherInfoManager()"> 
  <!-- start section navbar --> 
   
  <!-- End section navbar --> 
  <!-- start section header --> 
  <div id="header" class="home"> 
   <div class="container"> 
    <div class="header-content"> 
     <h1>I'm <span class="typed"></span></h1> 
     <p>炽热教育.</p> 
    
    </div> 
   </div> 
  </div> 
  <!-- End section header --> 
  <!-- start section about us --> 
  <div id="about" class="paddsection"> 
   <div class="container"> 
    <div class="row justify-content-between"> 
     <div class="col-lg-4 "> 
      <div class="div-img-bg"> 
       <div class="about-img" id ="teacher_avatar"> 
        <img src="images/me.jpg" class="img-responsive" alt="me" /> 
       </div> 
      </div> 
     </div> 
     <div class="col-lg-7"> 
      <div class="about-descr" id ="teacher_sign"> 
      </div> 
     </div> 
    </div> 
   </div> 
  </div> 
  <!-- end section about us --> 
  <!-- start section services --> 
  <div id="services"> 
   <div class="container"> 
    <div class="services-carousel owl-theme" id ="teacher_seniority"> 
    <!-- <div class="services-block"> 
      <span>UI/UX DESIGN</span> 
      <p class="separator">To an English person, it will seem like simplified English,told me what </p> 
     </div> 
     <div class="services-block"> 
      <span>BRAND IDENTITY</span> 
      <p class="separator">To an English person, it will seem like simplified English,told me what </p> 
     </div> 
     <div class="services-block"> 
      <span>WEB DESIGN</span> 
      <p class="separator">To an English person, it will seem like simplified English,told me what </p> 
     </div> 
     <div class="services-block"> 
      <span>MOBILE APPS</span> 
      <p class="separator">To an English person, it will seem like simplified English,told me what </p> 
     </div> 
     <div class="services-block"> 
      <span>Analytics</span> 
      <p class="separator">To an English person, it will seem like simplified English,told me what </p> 
     </div> 
     <div class="services-block"> 
      <span>PHOTOGRAPHY</span> 
      <p class="separator">To an English person, it will seem like simplified English,told me what </p> 
     </div> -->
    </div> 
   </div> 
  </div> 
  <!-- end section services --> 
  <!-- start section portfolio --> 
  <div id="portfolio" class="text-center paddsection"> 
   <div class="container"> 
    <div class="section-title text-center"> 
     <h2>荣誉室</h2> 
    </div> 
   </div> 
   <div class="container"> 
    <div class="row"> 
     <div class="col-md-12"> 
       
      <div class="portfolio-container" id ="teacher_img"> 
       <div class="col-lg-4 col-md-6 portfolio-thumbnail all branding uikits webdesign"> 
        <a class="popup-img" href="images/portfolio/1.jpg"> <img src="images/portfolio/1.jpg" alt="img" /> </a> 
       </div> 
       <div class="col-lg-4 col-md-6 portfolio-thumbnail all mockups uikits photography"> 
        <a class="popup-img" href="images/portfolio/2.jpg"> <img src="images/portfolio/2.jpg" alt="img" /> </a> 
       </div> 
       <div class="col-lg-4 col-md-6 portfolio-thumbnail all branding webdesig photographyn"> 
        <a class="popup-img" href="images/portfolio/3.jpg"> <img src="images/portfolio/3.jpg" alt="img" /> </a> 
       </div> 
       <div class="col-lg-4 col-md-6 portfolio-thumbnail all mockups webdesign photography"> 
        <a class="popup-img" href="images/portfolio/4.jpg"> <img src="images/portfolio/4.jpg" alt="img" /> </a> 
       </div> 
       <div class="col-lg-4 col-md-6 portfolio-thumbnail all branding uikits photography"> 
        <a class="popup-img" href="images/portfolio/5.jpg"> <img src="images/portfolio/5.jpg" alt="img" /> </a> 
       </div> 
       <div class="col-lg-4 col-md-6 portfolio-thumbnail all mockups uikits webdesign"> 
        <a class="popup-img" href="images/portfolio/6.jpg"> <img src="images/portfolio/6.jpg" alt="img" /> </a> 
       </div> 
      </div> 
     </div> 
    </div> 
   </div> 
  </div> 
  <!-- End section portfolio --> 
  <!-- start section journal --> 
  <!-- start section footer -->

  <div id="footer" class="text-center">

    <div class="container">
      <p>Copyright &copy; 2018.Chire Co., Ltd. All rights reserved.<a target="_blank" href="http://www.chire.net">杭州炽热教育科技有限公司</a></p>

    </div>

  </div>
 
  





   
  <!-- End section footer --> 
  <!-- JavaScript Libraries --> 
  <script src="css/js1.js"></script> 
  <script src="css/js2.js"></script> 
  <script src="css/js3.js"></script> 
  <script src="css/js4.js"></script> 
  <script src="css/js5.js"></script> 
  <script src="css/js6.js"></script> 
  <script src="css/js7.js"></script> 
  <script src="css/js8.js"></script> 
  <script src="css/js9.js"></script>
     
  <script type="text/javascript">
      function GetQueryString(name) {
          var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
          var r = window.location.search.substr(1).match(reg);//search,查询？后面的参数，并匹配正则
          if (r != null) return unescape(r[2]); return null;
      }


    /*获取老师信息*/
      function getTeacherInfoManager() {
        var idInfo = GetQueryString('id');
        $.ajax({
            url: '../../ChireInter/Teacher/Teacher_Info.ashx',
            data: { id: idInfo },
            type: 'post',
            dataType: 'json',
            success: function (res) {
                if (res.errCode == 200) {
                    // 首页 顶部图片
                    var avatarStr = "";
                    if (res.data.avatar.indexOf("http") == 0) {
                        avatarStr = res.data.avatar;
                    } else {
                        avatarStr = "https://chire.oss-cn-hangzhou.aliyuncs.com/" + res.data.avatar;
                    }
                     
                    var bannerStr = "";
                    if (res.data.banner.indexOf("http") == 0){
                        bannerStr = res.data.banner;
                    } else {
                        bannerStr = "https://chire.oss-cn-hangzhou.aliyuncs.com/" + res.data.banner;

                    }

                    var pc_home_bg = "background-image:url(" + bannerStr + ")";
                    var home_top_bg = $('#header');
                    home_top_bg.attr("style", pc_home_bg);

                    // 5.修改老师名字
                    actionChangeName(res.data.name);

                    // 1. 修改头像
                    var teacher_avatarView = $('#teacher_avatar');
                    var teacher_avatar_html = "<img src=\"" + avatarStr + "\" class=\"img-responsive\" alt=\"me\" />";
                    teacher_avatarView.html(teacher_avatar_html);

                    // 2.修改签名
                    var teacher_signView = $('#teacher_sign');

                    var teacher_sign_html = "";
                    teacher_sign_html+= "<p class=\"p-heading\">"+ "毕业于："+ res.data.school +"</p>"
                  
                    teacher_sign_html += "<p class=\"separator\">" + res.data.remark + "</p>";
                    teacher_signView.html(teacher_sign_html);
             
                    // 3. 修改老师资历
                    var teacher_seniorityView = $('#teacher_seniority');
                    var teacher_seniority_html = "";
                    for (var i in res.data.seniority) {
                        teacher_seniority_html += "<div class=\"services-block\">";
                        teacher_seniority_html += "<span>" + res.data.certPhotoArr[i] + "</span>";
                        teacher_seniority_html += "<p class=\"separator\">" + res.data.certPhotoArr[i] + "</p>";
                        teacher_seniority_html += "</div>";
                    }
                    teacher_seniorityView.html(teacher_seniority_html);
                    
                    // 4. 修改老师图片
                    var teacher_imgView = $('#teacher_img');
                    var teacher_img_html = "";
                    for (var i in res.data.lifephotoArr) {
                        var singleImg = res.data.lifephotoArr[i];
                        var nImg = "";
                        if (singleImg.indexOf("http") == 0) {
                            nImg = singleImg;
                        } else {
                            nImg = "https://chire.oss-cn-hangzhou.aliyuncs.com/" + singleImg;
                        }
                        teacher_img_html += "<div class=\"col-lg-4 col-md-6 portfolio-thumbnail all branding uikits webdesign\">"; 
                        teacher_img_html += "<a class=\"popup-img\" href=\"" + nImg + "\"> <img src=\"" + nImg + "\" alt=\"img\" /> </a>";
                        teacher_img_html += "</div>"; 
                    }
                    teacher_imgView.html(teacher_img_html);


                    // 个人标签
                    owlCarouselManager();
                    // 图片点击效果
                    magnifPopup();

                    portfolioIsotopeManager();
                }
            },
            error: function (err) {
                alert('提交失败' + err);
            }
        })
    }

      // 1. 修改名字
      var typed = $(".typed");
      function actionChangeName(name) {
          typed.typed({
              strings: [name],
              typeSpeed: 100,
              loop: true,
          });
      }

      // 每当scroll就会执行
      $(window).scroll(function () {
          var scroll = $(window).scrollTop();
          if (scroll > 200) {
              $("#main-nav, #main-nav-subpage").slideDown(700);
              $("#main-nav-subpage").removeClass('subpage-nav');
          } else {
              $("#main-nav").slideUp(700);
              $("#main-nav-subpage").hide();
              $("#main-nav-subpage").addClass('subpage-nav');
          }
      });

      // 个人标签items
      function owlCarouselManager() {
          $('.services-carousel').owlCarousel({
              autoplay: true,
              loop: true,
              margin: 20,
              dots: true,
              nav: false,
              responsiveClass: true,
              responsive: { 0: { items: 1 }, 768: { items: 2 }, 900: { items: 4 } }
          });
      }

      // 点击进行pop
      var magnifPopup = function () {
          $('.popup-img').magnificPopup({
              type: 'image',
              removalDelay: 300,
              mainClass: 'mfp-with-zoom',
              gallery: {
                  enabled: true
              },
              zoom: {
                  enabled: true, // By default it's false, so don't forget to enable it

                  duration: 300, // duration of the effect, in milliseconds
                  easing: 'ease-in-out', // CSS transition easing function

                  opener: function (openerElement) {
                       return openerElement.is('img') ? openerElement : openerElement.find('img');
                  }
              }
          });
      };

      $(document).on("scroll", onScroll);

      $('a[href^="#"]').on('click', function (e) {
          e.preventDefault();
          $(document).off("scroll");

          $('a').each(function () {
              $(this).removeClass('active');
              if ($(window).width() < 768) {
                  $('.nav-menu').slideUp();
              }
          });

          $(this).addClass('active');

          var target = this.hash,
              menu = target;

          target = $(target);
          $('html, body').stop().animate({
              'scrollTop': target.offset().top - 80
          }, 500, 'swing', function () {
              window.location.hash = target.selector;
              $(document).on("scroll", onScroll);
          });
      });

      function onScroll(event) {
          if ($('.home').length) {
              var scrollPos = $(document).scrollTop();
              $('nav ul li a').each(function () {
                  var currLink = $(this);
                  var refElement = $(currLink.attr("href"));
              });
          }
      }


      function portfolioIsotopeManager() {
          $('.portfolio-container').isotope({
              itemSelector: '.portfolio-thumbnail',
              layoutMode: 'fitRows'
          });
      }

      var portfolioIsotope = $('.portfolio-container').isotope({
          itemSelector: '.portfolio-thumbnail',
          layoutMode: 'fitRows'
      });

  
    $('#portfolio-flters li').on('click', function () {
        $("#portfolio-flters li").removeClass('filter-active');
        $(this).addClass('filter-active');
        portfolioIsotope.isotope({ filter: $(this).data('filter') });
    });

</script>
        
 </body>
</html>